<div class="modal-dialog modal-lg" role="document" id="compactDatabaseDialog">
    <form data-bind="submit: compactDatabase" autocomplete="off" novalidate>
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="icon-compact"></i><span>Compact Database <strong data-bind="text: database.name"></strong></span>
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="icon-cancel"></i></button>
            </div>
            <div class="modal-body">
                <div class="flex-form">
                    <div class="form-group margin-top" data-bind="visible: database.isSharded, if: database.isSharded, validationElement: shard, validationOptions: { insertMessages: false }">
                        <label class="control-label">Shard</label>
                        <div class="flex-grow">
                            <button type="button" class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown" aria-expanded="false">
                                <span data-bind="text: shard() != null ? '#' + shard() : '- select shard -'"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" data-bind="foreach: shards">
                                <li><a href="#" data-bind="click: _.partial($root.shard, $data)"><span data-bind="text: '#' + $data"></span></a></li>
                            </ul>
                            <span class="help-block" data-bind="validationMessage: shard"></span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="control-label">&nbsp;</label>
                        <div class="toggle">
                            <input id="compactDocuments" type="checkbox" data-bind="checked: compactDocuments" />
                            <label for="compactDocuments">Compact documents</label>
                        </div>
                    </div>
                   
                    <div class="form-group">
                        <label class="control-label">&nbsp;</label>
                        <div class="toggle" title="Uncheck to select specific indexes">
                            <input id="allIndexes" type="checkbox" data-bind="checked: compactAllIndexes" />
                            <label for="allIndexes">Compact all indexes</label><small data-bind="text: numberOfIndexesFormatted"></small>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">&nbsp;</label>
                        <div class="margin-left">
                            <div class="toggle" title="Check to skip optimization of Lucene indexes">
                                <input id="skipOptimizeIndexes" type="checkbox" data-bind="checked: skipOptimizeIndexes" />
                                <label for="skipOptimizeIndexes">Skip optimize indexes</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" data-bind="visible: !allIndexes().length">
                        <label class="control-label">&nbsp;</label>
                        <div class="text-center text-muted">
                            <i class="icon-empty-set"></i><small>No Indexes available</small>
                        </div>
                    </div>
                    <div id="collapseIndexes" data-bind="collapse: !compactAllIndexes(), visible: allIndexes().length">
                        <hr>
                        <div class="row">
                            <div class="col-sm-offset-1 col-sm-4">
                                <span>Select indexes:</span>
                                <small class="margin-left margin-left-sm" data-bind="text: numberOfSelectedIndexesFormatted"></small>
                            </div>
                            <div class="col-sm-5 margin-left margin-left-lg no-padding-right">
                                <div class="input-group">
                                    <input class="form-control" placeholder="Filter indexes" data-bind="textInput: filterText" />
                                    <span class="input-group-addon"><small class="glyphicon glyphicon-filter" aria-hidden="true"></small></span>
                                </div>
                            </div>
                            <button class="btn btn-info margin-left margin-left-sm" data-bind="click: selectAllIndexes, enable: selectAllIndexesEnabled">
                                <span>Select All</span>
                            </button>
                        </div>
                        <div class="row limit-height margin-top margin-top-sm" data-bind="foreach: filteredIndexes">
                            <div class="col-sm-offset-1 col-sm-11 force-text-wrap">
                                <div class="toggle toggle-info">
                                    <input type="checkbox" data-bind="attr: { id: 'index_' + $index() }, value: $data, checked: $parent.indexesToCompact" />
                                    <label data-bind="attr: { for: 'index_' + $index() }, text: $data"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="text-left alert alert-warning padding padding-sm margin-top-sm margin-bottom-sm border-radius-xs flex-horizontal">
                    <div class="flex-start"><small><i class="icon-warning"></i></small></div>
                    <div>
                        <small data-bind="visible: numberOfNodes() > 1">During <strong class="text-warning">compaction</strong> the database will be offline.</small>
                        <small data-bind="visible: numberOfNodes() === 1, html: 'During compaction the database will be offline on this node - ' + currentNodeTag()"></small>
                        <div><small>Existing documents will be <strong class="text-warning">compressed</strong> only if 'Document Compression' is set for the related collection.</small></div>
                    </div>
                </div>
                <div class="padding text-right">
                    <button data-dismiss="modal" class="btn btn-default">
                        <i class="icon-cancel"></i><span>Cancel</span>
                    </button>
                    <button type="submit" class="btn btn-primary" data-bind="enable: compactEnabled">
                        <i class="icon-compact"></i><span>Compact</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
